<template>
  <div class="app-container">
    <el-form :inline="true" label-width="80px">
      <el-form-item label="昵称">
        <el-input v-model="queryName" style="width: 250px" placeholder="昵称查询" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserByName">查询</el-button>
      </el-form-item>
      <el-form-item label="ID">
        <el-input v-model="queryID" style="width: 250px" placeholder="ID查询" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserById">查询</el-button>
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="queryAccount" style="width: 250px" placeholder="账号查询" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserByAccount">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        label="序号"
      >
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        fixed
        prop="userId"
        label="ID"
        width="200"
      />
      <el-table-column
        prop="userName"
        label="账号"
        width="100"
      />
      <el-table-column
        prop="role"
        label="角色"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.role===1?"普通用户":"管理员" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userGender"
        label="性别"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.row.userGender===1?"男":"女" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userRegisterTime"
        label="注册时间"
        width="170"
      />
      <el-table-column
        prop="userFreeze"
        label="冻结状态"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.userFreeze===1?"已冻结":"未冻结" }}
        </template>
      </el-table-column>

      <el-table-column
        prop="userPet"
        label="昵称"
        width="100"
      />
      <el-table-column
        prop="userEmail"
        label="邮箱"
        width="200"
      />
      <el-table-column
        prop="userDescription"
        label="个性签名"
        width="900"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleClick(scope.row)">
            {{ scope.row.userFreeze=='1'?'解冻':'冻结' }}
          </el-button>
          <el-button type="text" size="small" @click="handleClick1(scope.row)">改变角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getUserList" />
  </div>

</template>

<script>
import author from '@/api/userlist'
import Pagination from '@/components/Pagination'
export default {
  name: 'Userlist',
  components: { Pagination },
  data() {
    return {
      list: [],
      page: 1,
      limit: 10,
      total: 0,
      queryName: '',
      queryID: '',
      queryAccount: ''
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    handleClick(row) {
      const id = row.userId
      let Freeze
      if (row.userFreeze === 1) {
        this.$message('已解冻')
        Freeze = 0
      } else if (row.userFreeze === 0) {
        this.$message('已冻结')
        Freeze = 1
      }
      author.updateFreeze(id, Freeze)
      row.userFreeze = Freeze
    },
    handleClick1(row) {
      console.log(row.role)
      const id = row.userId
      let role
      if (row.role === 1) {
        this.$message('已设为管理员')
        role = 2
      } else if (row.role === 2) {
        this.$message('已设为普通用户')
        role = 1
      }
      /* console.log(role)*/
      author.setUserRoleById(id, role)
      row.role = role
    },
    getUserList() {
      author.getUserListPage(this.page, this.limit).then(res => {
        /* console.log(res)*/
        this.list = res.data.userList
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    getUserByName() {
      this.total = 0
      this.page = 1
      this.limit = 10
      if (this.queryName === '') {
        this.getUserList()
        this.$message('请输入昵称')
        return
      }
      author.getUserByName(this.queryName, this.page, this.limit).then(res => {
        this.list = res.data.userList
      })
    },
    getUserById() {
      this.total = 0
      this.page = 1
      this.limit = 10
      if (this.queryID === '') {
        this.getUserList()
        this.$message('请输入ID')
        return
      }
      author.getUserById(this.queryID).then(res => {
        this.list = []
        this.list.push(res.data.user)
      })
    },
    getUserByAccount() {
      this.total = 0
      this.page = 1
      this.limit = 10
      if (this.queryAccount === '') {
        this.getUserList()
        this.$message('请输入账号')
        return
      }
      author.getUserByAccount(this.queryAccount).then(res => {
        this.list = []
        this.list.push(res.data.user)
      })
    }
  }
}
</script>
